<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="form"
      class="searchForm bg-gray flex flex-wp flex-a-c"
      size="small"
    >
      <el-form-item label="登录账号">
        <el-input
          v-model="form.username"
          placeholder="请输入登录账号"
        ></el-input>
      </el-form-item>
      <el-button size="small" icon="el-icon-search" @click="search()"
        >查询</el-button
      >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="editUser()"
        >新建员工</el-button
      >
      <el-button
        size="small"
        type="danger"
        icon="el-icon-delete"
        v-if="multipleSelection.length != 0"
        @click="batchDelete()"
        >批量删除</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="80" align="center">
      </el-table-column>
      <el-table-column prop="realname" label="账号名称" align="center">
      </el-table-column>
      <el-table-column prop="username" label="登录账号" align="center">
      </el-table-column>
      <el-table-column prop="roleName" label="角色" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">{{
          scope.row.locked == 0 ? "正常" : "禁用"
        }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="220"
        class-name="actionTd"
      >
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            round
            @click="editUser(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            round
            @click="deleteUser(scope.row)"
          >
            删除</el-button
          >
          <!-- <el-button
            size="mini"
            type="primary"
            round
            @click="authorShow(scope.row)"
            >权限查看</el-button
          >

          <el-button
            size="mini"
            type="success"
            round
            @click="passwordReset(scope.row)"
            >密码重置</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :title="!editData.id ? '新建账号' : '编辑账号'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="editData" label-width="140px">
        <el-form-item label="登录账号" required>
          <el-input
            v-model="editData.username"
            autocomplete="off"
            :disabled="!!editData.id"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" v-if="!editData.id" required>
          <el-input
            v-model="editData.password"
            autocomplete="off"
            type="password"
            v-inserte-input
            placeholder="请输入密码(6-14位)"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定密码" v-if="!editData.id" required>
          <el-input
            v-model="editData.qdpassword"
            autocomplete="off"
            type="password"
            v-inserte-input
            placeholder="请输入密码(6-14位)"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号名称">
          <el-input v-model="editData.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位名称" required>
          <el-select v-model="editData.roleId" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="editData.locked"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="editUserSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="密码重置"
      :visible.sync="passWordVisible"
    >
      <el-form :model="editPass" label-width="100px">
        <el-form-item label="密码">
          <el-input
            v-model="editPass.password"
            autocomplete="off"
            type="password"
            v-inserte-input
            placeholder="请输入密码(6-14位)"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定密码">
          <el-input
            v-model="editPass.qdpassword"
            autocomplete="off"
            type="password"
            v-inserte-input
            placeholder="请输入密码(6-14位)"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="passWordVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="passwordChange()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "",
      }, //搜索条件
      qdForm: {},
      multipleSelection: [], //多选
      dialogFormVisible: false, //新建/编辑弹窗
      passWordVisible: false, //密码编辑弹窗
      tableData: [], //表格数据
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      editData: {}, //编辑数据
      editPass: {
        id: "",
        password: "",
        qdpassword: "",
      },
      roleList: [],
    };
  },
  beforeMount() {
    this.search();
    this.getRoleList();
  },
  methods: {
    //获取角色列表
    getRoleList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/permission/getRoleListByType", {
          types: 1,
        })
        .then((data) => {
          loading.close();
          this.roleList = data.resData;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    //确定搜索条件
    search() {
      this.qdForm = { ...this.form };
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      };
      this.getDataList();
    },
    //获取表格数据
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        userName: this.qdForm.username,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/permission/getUserByRoleId", params)
        .then((data) => {
          loading.close();
          this.tableData = data.resData?.data||[];
          this.pageInfo.total = data.resData?.count||0;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    //多选按钮点击
    handleSelectionChange(data) {
      this.multipleSelection = data;
    },
    //批量删除员工
    batchDelete() {
      this.$confirm("此操作将删除选中用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          let ids = [];
          multipleSelection.forEach((element) => {
            ids.push(element.id);
          });
          this.$ajax
            .postData("adm/adminuser/delUserList", {
              ids: ids,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //员工编辑操作
    editUser(data) {
      console.log(data);
      if (!data) {
        this.editData = {
          realname: "",
          username: "",
          roleId: "",
          locked: 0,
          password: "",
          qdpassword: "",
        };
      } else {
        this.editData = {
          id: data.id,
          realname: data.realname,
          username: data.username,
          roleId: data.roleId,
          locked: data.locked,
        };
      }
      this.dialogFormVisible = true;
    },
    //员工删除操作
    deleteUser(data) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          this.$ajax
            .postData("adm/adminuser/insertOrUpdateAdminUser", {
              id: data.id,
              isDel: 1,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //角色权限展示(dailog)
    authorShow(data) {
      console.log(data);
      this.$message("此功能暂未开放");
    },
    //用户密码重置
    passwordReset(data) {
      console.log(data);
      this.editPass = {
        id: data.id,
        password: "",
        qdpassword: "",
      };
      this.passWordVisible = true;
    },
    //编辑/新建角色
    editUserSubmit() {
      let params = {
        ...this.editData,
      };
      if (!params.username) {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
        return false;
      }
      if (!params.id && !this.checkSamePass()) {
        return false;
      }
      if (!params.roleId) {
        this.$message({
          message: "请选择岗位",
          type: "warning",
        });
        return false;
      }

      this.submit(params);
    },
    //密码修改
    checkSamePass() {
      if (!this.editData.password) {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
        return false;
      }

      if (!this.editData.qdpassword) {
        this.$message({
          message: "请输入确认密码",
          type: "warning",
        });
        return false;
      }

      if (this.editData.password !== this.editData.qdpassword) {
        this.$message({
          message: "密码与确认密码不一致",
          type: "warning",
        });
        return false;
      }
      if (!/^[a-zA-Z0-9]{6,14}$/g.test(this.editData.password)) {
        this.$message({
          message: "请输入正确格式(6-14位数字字母)密码",
          type: "warning",
        });
        return false;
      }
      return true;
    },
    passwordChange() {
      if (this.editData.id && !this.checkSamePass()) {
        return false;
      }
      let params = {
        ...this.editData,
      };
      this.submit(params);
    },
    submit(params) {
      if (params.password) {
        params.password = this.encryptByEnDES(params.password);
        delete params.qdpassword;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/adminuser/insertOrUpdateAdminUser", params)
        .then((data) => {
          loading.close();
          this.$message({
            message: params.id
              ? params.password
                ? "密码重置成功"
                : "编辑账号成功"
              : "新建账号成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.passWordVisible = false;
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.actionTd {
  button {
    margin-bottom: 10px;
    min-width: 80px;
    margin-left: 10px;
  }
}
</style>